<template>
  <ex-dialog
    width="1200px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="280px" class="demo-ruleForm" :disabled="disabled">
      <el-row>
        <el-col :span="14">
          <el-form-item label="兑换比例:" prop="exchangeRatio">
            <el-input type="text" v-model="ruleForm.exchangeRatio" autocomplete="off" placeholder="请填写积分兑换比例">
              <template slot="prepend">1 个椰分 =</template>
              <template slot="append">个金鹏积分</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：兑换比例数字类型是正整数且必须是10的倍数</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="用户单次兑换金鹏积分最小值:" prop="minAmount">
            <el-input type="text" v-model="ruleForm.minAmount" autocomplete="off" placeholder="请输入">
              <template slot="append">个/次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：金鹏积分起兑值≥50个/次，数字类型是正整数且必须是10的倍数</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="用户单次兑换金鹏积分最大值:" prop="maxAmount">
            <el-input type="text" v-model.number="ruleForm.maxAmount" autocomplete="off" placeholder="请输入">
              <template slot="append">个/次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：当前数值≤合同规定用户单次兑换金鹏积分的最大值</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="合同规定用户单次兑换金鹏积分最大值:" prop="partnerMaxAmount">
            <el-input type="text" v-model.number="ruleForm.partnerMaxAmount" autocomplete="off" placeholder="请输入">
              <template slot="append">个/次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：当前值为合同规定用户单次兑换金鹏积分的最大值</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="用户年度兑换金鹏积分最大值:" prop="yearAmount">
            <el-input type="text" v-model.number="ruleForm.yearAmount" autocomplete="off" placeholder="请输入">
              <template slot="append">个/次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：当前数值≤合同规定用户年度兑换金鹏积分的最大值</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="合同规定用户年度兑换金鹏积分最大值:" prop="partnerYearAmount">
            <el-input type="text" v-model.number="ruleForm.partnerYearAmount" autocomplete="off" placeholder="请输入">
              <template slot="append">个/次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10"><div class="tips">注：当前值为合同规定用户年度兑换金鹏积分的最大值</div></el-col>
      </el-row>
      <el-form-item label="手续费：" prop="exchangeFeeRatio">
				<el-input type="text" v-model="ruleForm.exchangeFeeRatio"  placeholder="请输入手续费">
          <template slot="prepend">按支付椰分收取</template>
          <template slot="append">%服务费</template>
        </el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认提交</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  editExchange,
  pointsExchangeConfigDetail,
  commitExchange
} from '@/api/integralOperation/jinpengManage'
import '@wangeditor/editor/dist/css/style.css'
import {
  Editor,
  Toolbar
} from "@wangeditor/editor-for-vue";
export default {
  components: {
    Loading,
    Editor,
    Toolbar
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var checkExchangeRatio= (rule, value, callback) => {
      var reg = /^[+-]?(\d){1,}0$/;
      if (value === '') {
        callback(new Error('请填写积分兑换比例'));
      } else if (!reg.test(value)) {
        callback(new Error('兑换比例数字类型是正整数且必须是10的倍数'));
      }  else {
        callback();
      }
    };
    var checkMinAmount = (rule, value, callback) => {
      var reg = /^[+-]?(\d){1,}0$/;
      if (value === '') {
        callback(new Error('请填写单次兑换金鹏积分最小值'));
      } else if (value < 50) {
        callback(new Error('金鹏积分起兑值≥50个/次'));
      } else if (!reg.test(value)) {
        callback(new Error('数字类型是正整数且必须是10的倍数'));
      }  else {
        callback();
      }
    };
    var checkMaxAmount = (rule, value, callback) => {
      console.log('666++',this.ruleForm.partnerMaxAmount)
      let regNumber = /^\+?[1-9]\d*$/; //大于0的正整数
      if (value === '') {
        callback(new Error('请填写单次兑换金鹏积分最大值'));
      } else if (value > this.ruleForm.partnerMaxAmount) {
        callback(new Error('当前数值≤合同规定用户单次兑换金鹏积分的最大值'));
      } else if (!regNumber.test(value)) {
        callback(new Error('单次兑换金鹏积分最大值格式不正确，必须是正整数'));
      }  else {
        callback();
      }
    };
    var checkPartnerMaxAmount = (rule, value, callback) => {
      let regNumber = /^\+?[1-9]\d*$/; //大于0的正整数
      if (value === '') {
        callback(new Error('请填写合同规定用户单次兑换金鹏积分最大值'));
      } 
      // else if (value > 8000) {
      //   callback(new Error('8000为合同规定用户单次兑换金鹏积分的最大值'));
      // } 
      else if (!regNumber.test(value)) {
        callback(new Error('必须是正整数'));
      }  else {
        callback();
      }
    };
    var checkYearAmount = (rule, value, callback) => {
      let regNumber = /^\+?[1-9]\d*$/; //大于0的正整数
      if (value === '') {
        callback(new Error('请填写年度兑换金鹏积分最大值'));
      } else if (value > this.ruleForm.partnerYearAmount) {
        callback(new Error('年度兑换金鹏积分最大值不超过'+ this.ruleForm.partnerYearAmount));
      } else if (!regNumber.test(value)) {
        callback(new Error('年度兑换金鹏积分最大值格式不正确，必须是正整数'));
      }  else {
        callback();
      }
    };
    var checkPartnerYearAmount = (rule, value, callback) => {
      let regNumber = /^\+?[1-9]\d*$/; //大于0的正整数
      if (value === '') {
        callback(new Error('请输入合同规定用户年度兑换金鹏积分最大值'));
      } 
      // else if (value > 100000) {
      //   callback(new Error('年度兑换金鹏积分最大值不超过100000'));
      // } 
      else if (!regNumber.test(value)) {
        callback(new Error('合同规定用户年度兑换金鹏积分最大值格式不正确，必须是正整数'));
      }  else {
        callback();
      }
    };
     /* 大于0的整数 */
    var checkExchangeFeeRatio = (rule, value, callback) => {
      //总库存限制数量校验
      let regNumber = /(^[0-9](\d+)?(\.\d{1,1})?$)|(^\d\.\d{1,1}$)/; //大于0的数值且最多保留两位小数的数值
      if (value !== '' ) {
        if (regNumber.test(value) == false) {
          return callback(new Error("手续费格式不正确，必须是正数或零，最多一位小数"));
        } else {
          return callback();
        }
      } 
      else {
        return callback();
      }
    };
    return {
      disabled: false,
      loading: false,
      title: '海航积分通兑配置',
      betTypeList: [
        {id: '1',value: '神椰coco'}
      ],
      typeList: [
        {id: '1',value: '支持竞猜'},
        {id: '2',value: '冠军竞猜'},
      ],
      roleList: [],
			ruleForm: {
        exchangeFeeRatio: '',//兑换手续费率
				exchangeRatio: '',//兑换比例（1椰分 = X积分）
				exchangeType: '1',//通兑类型 1 海航金鹏积分通兑
        id: '',
        maxAmount: '',//单次兑换最大值
        minAmount: '',//单次兑换最小值
        partnerMaxAmount: '',//	合同规定单次兑换最大值
        partnerYearAmount: '',//合同规定年度兑换最大值
        yearAmount: '',//年度兑换最大值
      },
      flags: false,
			rules: {
        exchangeRatio:   [
          { validator: checkExchangeRatio,required: true,trigger:['blur','change'] }
        ],
        minAmount: [
          { validator: checkMinAmount,required: true,trigger: ['blur','change'] }
        ],
        maxAmount: [
          {  validator: checkMaxAmount,required: true,trigger: ['blur','change'] }
        ],
        partnerMaxAmount: [
          {  validator: checkPartnerMaxAmount,required: true,trigger: ['blur','change']}
        ],
        yearAmount: [
          { validator: checkYearAmount,required: true,trigger: ['blur','change'] }
        ],
        partnerYearAmount: [
          { validator: checkPartnerYearAmount,required: true, trigger: ['blur','change']}
        ],
        exchangeFeeRatio: [
          { validator: checkExchangeFeeRatio,trigger: ['blur','change'] }
        ],
      },
    }
  },
  computed: {
   
  },
  created() {
    this.getDetail()
	},
  methods: {
    //活动详情
    getDetail(){
      var id = this.id
      var data = {
        exchangeType: 1
      }
      pointsExchangeConfigDetail(data).then(res => {
        this.ruleForm = res.result
      })
    },
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          this.loading = true
          var data = {
              ...this.ruleForm
            }
            editExchange(data).then(res => {
              this.handleSuccess("操作成功")
              setTimeout(() => {
                this.loading = false
              }, 1000);
              this.$emit('success')
            }).catch(()=>{
               this.loading = false
            }).finally(() => {
            })
           
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1000,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}

.richText {
  border: 1px solid #ccc;
  line-height: normal;
}
.el-form-item{
  margin-bottom: 40px !important;
}
.el-input{
  width: 360px;
}
.tips{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
}
</style>